<template>
    <div
        v-if="show"
        :style="{
            position: 'fixed',
            left: 0,
            right: 0,
            top: navbarHeight + 'px',
            bottom: 0,
            background: isMask ? maskBg : '',
            zIndex: 999,
        }"
        @click.stop="handleCloseDialog()"
    >
        <div
            :class="show ? 'dialog-show' : 'dialog-hide'"
            :style="{
                position: 'absolute',
                right: 0,
                width: w,
                height: h,
                background: bg,
            }"
        >
            <slot name="operate"></slot>
        </div>
    </div>
</template>

<script>
    import variables from '@/assets/style/variable.module.scss'

    export default {
        props: {
            // 是否显示
            show: {
                type: Boolean,
                default: false
            },

            // 是否显示遮罩
            isMask: {
                type: Boolean,
                default: true
            },

            // 是否点击遮罩关闭
            isCloseMask: {
                type: Boolean,
                default: true
            },

            // 遮罩背景色
            maskBg: {
                type: String,
                default: 'rgba(0, 0, 0, 0.5)'
            },

            // 弹窗宽度
            w: {
                type: String,
                default: '38%'
            },

            // 弹窗高度
            h: {
                type: String,
                default: '100%'
            },

            // 弹窗背景色
            bg: {
                type: String,
                default: '#ffffff'
            },
        },

        data() {
            return {
                navbarHeight: variables.navbarHeight, // 导航栏高度
            }
        },

        methods: {
            // 关闭弹窗
            handleCloseDialog() {
                if (!this.isCloseMask) return
                this.$emit('handleCloseDialog')
            },
        },
    }
</script>

<style lang="scss" scoped>
    .dialog-show {
        animation: dialog-show 0.3s;
    }

    .dialog-hide {
        animation: dialog-hide 0.3s;
    }

    @keyframes dialog-show {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(0);
        }
    }
</style>